/* 
    Document   : index
    Created on : 12-dic-2012, 15:36:40
    Author     : damfercer
    Description:
        Purpose of the stylesheet follows.
*/


@font-face{ 
	font-family:AmaticSC-Bold;
	src: url('../resources/fonts/AmaticSC-Bold.eot');
        src: url('../resources/fonts/AmaticSC-Bold.eot?#iefix') format('embedded-opentype'),
             url('../resources/fonts/AmaticSC-Bold.ttf') format('truetype');
}

root { 
    display: block;
}

.divSlider{
    width:40%;
    height: 400px;
    list-style: none;
    padding:0;
    position:relative;
    display: inline-block;
    margin:0;
    margin-bottom: 40px;
    float:left;
    background-color: white;
}

.divSlider:after{ 
    content: '';
    background: transparent url("pattern.png.xhtml?ln=images") repeat top left; 
}

.divSlider li{
    width:100%;
    height:100%;
    background-size: cover;
    top:0;
    left:0;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    position:absolute;
    color:transparent;
    opacity:0;
    z-index: 0;
    -webkit-backface-visibility: hidden;
    -webkit-animation: imageAnimation 36s linear infinite 0s;
    -moz-animation: imageAnimation 36s linear infinite 0s;
    -o-animation: imageAnimation 36s linear infinite 0s;
    -ms-animation: imageAnimation 36s linear infinite 0s;
    animation: imageAnimation 36s linear infinite 0s; 
    
}

.divSlider li div { 
    z-index: 1000;
    position: absolute;
    bottom: 30px;
    left: 0px;
    width: 100%;
    text-align: left;
    opacity: 0;
    color: #fff;
    -webkit-animation: titleAnimation 36s linear infinite 0s;
    -moz-animation: titleAnimation 36s linear infinite 0s;
    -o-animation: titleAnimation 36s linear infinite 0s;
    -ms-animation: titleAnimation 36s linear infinite 0s;
    animation: titleAnimation 36s linear infinite 0s; 
}


.divSlider li div span { 
    font-family: 'AmaticSC-Bold', 'Arial Narrow', Arial, sans-serif;
    font-size: 300%;
    margin-bottom: -30px;
    vertical-align: bottom;
    text-align: left;
    display:inline-block;
    padding:10px;
    color:white;
    /*line-height: 200px;*/ 
}

.divSlider li:nth-child(1){
    background-image: url("06.jpg.xhtml?ln=images");
}
.divSlider li:nth-child(2){ 
    background-image: url("edu.jpg.xhtml?ln=images");
    -webkit-animation-delay: 6s;
    -moz-animation-delay: 6s;
    -o-animation-delay: 6s;
    -ms-animation-delay: 6s;
    animation-delay: 6s; 
}
.divSlider li:nth-child(3){ 
    background-image: url("edu_bn.jpg.xhtml?ln=images");
    background-position: 0% 0%;
    -webkit-animation-delay: 12s;
    -moz-animation-delay: 12s;
    -o-animation-delay: 12s;
    -ms-animation-delay: 12s;
    animation-delay: 12s; 
}
.divSlider li:nth-child(4){ 
    background-image: url("IMG_0013.jpg.xhtml?ln=images");
    -webkit-animation-delay: 18s;
    -moz-animation-delay: 18s;
    -o-animation-delay: 18s;
    -ms-animation-delay: 18s;
    animation-delay: 18s; 
}
.divSlider li:nth-child(5){ 
    background-image: url("IMG_9924.jpg.xhtml?ln=images");
    -webkit-animation-delay: 24s;
    -moz-animation-delay: 24s;
    -o-animation-delay: 24s;
    -ms-animation-delay: 24s;
    animation-delay: 24s; 
}
.divSlider li:nth-child(6){ 
    background-image: url("IMG_9975.jpg.xhtml?ln=images");
    -webkit-animation-delay: 30s;
    -moz-animation-delay: 30s;
    -o-animation-delay: 30s;
    -ms-animation-delay: 30s;
    animation-delay: 30s; 
}

.divSlider li:nth-child(2) div { 
    -webkit-animation-delay: 6s;
    -moz-animation-delay: 6s;
    -o-animation-delay: 6s;
    -ms-animation-delay: 6s;
    animation-delay: 6s; 
}
.divSlider li:nth-child(3) div { 
    -webkit-animation-delay: 12s;
    -moz-animation-delay: 12s;
    -o-animation-delay: 12s;
    -ms-animation-delay: 12s;
    animation-delay: 12s; 
}
.divSlider li:nth-child(4) div { 
    -webkit-animation-delay: 18s;
    -moz-animation-delay: 18s;
    -o-animation-delay: 18s;
    -ms-animation-delay: 18s;
    animation-delay: 18s; 
}
.divSlider li:nth-child(5) div { 
    -webkit-animation-delay: 24s;
    -moz-animation-delay: 24s;
    -o-animation-delay: 24s;
    -ms-animation-delay: 24s;
    animation-delay: 24s; 
}
.divSlider li:nth-child(6) div { 
    -webkit-animation-delay: 30s;
    -moz-animation-delay: 30s;
    -o-animation-delay: 30s;
    -ms-animation-delay: 30s;
    animation-delay: 30s; 
}

.divSlider li:nth-child(1) span {
    background-color:#e1ad0f;
}

.divSlider li:nth-child(2) span { 
    background-color:#F046B9;
}
.divSlider li:nth-child(3) span { 
    background-color:#4DC037;
}
.divSlider li:nth-child(4) span { 
    background-color:purple; 
}
.divSlider li:nth-child(5) span { 
    background-color:#ED622B;
}
.divSlider li:nth-child(6) span { 
    background-color:#00a7c8;
}

@keyframes imageAnimation { 
    0% { 
        opacity: 0; 

    }
    8% { opacity: 1; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}

@keyframes titleAnimation { 
    0% { opacity: 0 }
    8% { opacity: 1 }
    17% { opacity: 1 }
    19% { opacity: 0 }
    100% { opacity: 0 }
}

.no-cssanimations .divSlider li{
    opacity: 1;
}

.no-cssanimations .divSlider div {
    opacity: 1;
}

@-webkit-keyframes imageAnimation { 
    0% { opacity: 0;
    -webkit-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -webkit-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
@-moz-keyframes imageAnimation { 
    0% { opacity: 0;
    -moz-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -moz-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
@-o-keyframes imageAnimation { 
    0% { opacity: 0;
    -o-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -o-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
@-ms-keyframes imageAnimation { 
    0% { opacity: 0;
    -ms-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -ms-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
@keyframes imageAnimation { 
    0% { opacity: 0;
    animation-timing-function: ease-in; }
    8% { opacity: 1;
         animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
/* Animation for the title */
@-webkit-keyframes titleAnimation { 
    0% { opacity: 0 }
    8% { opacity: 0.8 }
    17% { opacity: 0.8 }
    19% { opacity: 0 }
    100% { opacity: 0 }
}
@-moz-keyframes titleAnimation { 
    0% { opacity: 0 }
    8% { opacity: 0.8 }
    17% { opacity: 0.8 }
    19% { opacity: 0 }
    100% { opacity: 0 }
}
@-o-keyframes titleAnimation { 
    0% { opacity: 0 }
    8% { opacity: 0.8 }
    17% { opacity: 0.8 }
    19% { opacity: 0 }
    100% { opacity: 0 }
}
@-ms-keyframes titleAnimation { 
    0% { opacity: 0 }
    8% { opacity: 0.8 }
    17% { opacity: 0.8 }
    19% { opacity: 0 }
    100% { opacity: 0 }
}
@keyframes titleAnimation { 
    0% { opacity: 0 }
    8% { opacity: 0.8 }
    17% { opacity: 0.8 }
    19% { opacity: 0 }
    100% { opacity: 0 }
}

.divCara{
    width:18.5%;
    float:right;
    display:inline-block;
    height:195px;
    margin-bottom: 10px;
    margin-left: 1%;
    background-size: cover;
    background-repeat: no-repeat;
}

.cara1{
    background-image: url("cara1.jpg.xhtml?ln=images");
    background-position: 50% 00%;
}
.cara2{
    background-image: url("cara2.jpg.xhtml?ln=images");
    background-position: 50% 50%;
}
.cara3{
    background-image: url("cara3.jpg.xhtml?ln=images");
    background-position: 50% 50%;
}
.cara4{
    background-image: url("cara4.jpg.xhtml?ln=images");
    background-position: 50% 50%;
}
.cara5{
    background-image: url("cara5.jpg.xhtml?ln=images");
    background-position: 50% 50%;
}
.cara6{
    background-image: url("cara6.jpg.xhtml?ln=images");
    background-position: 50% 50%;
}

/*.divCaras{
    width:59%;
    background: url("caras 6.png.xhtml?ln=images") no-repeat;
    display: inline-block;
    height: 400px;
    float:right;
    margin-bottom: 40px;
}
*/


.homeText{
    width:40%;
    min-width: 300px;
    display:inline-block;
    vertical-align: top;
    margin-bottom: 50px;
}

.homeTextTitle{
    font-family: Helvetica;
    color:#444444;
    display:block;
    margin-bottom: 15px;
    font-size: 30px;
    font-weight: bold;
}

.homeTextBody{
    display: block;
    font-family: Helvetica;
    color: #868585;
    text-align:justify;
    font-size: 14px;
    margin-bottom:7px;
/* for IE9 */
}

.homeTextItemBody{
    display: block;
    font-family: Helvetica;
    color: #868585;
    text-align:justify;
    font-size: 14px;
}

.buttonHome{
    float:right;
    display:inline-block;
    min-width:200px;
    width:15%;
    font-family: Helvetica;
    color:white;
    font-size: 24px;
    height: 180px;
    text-align: center;
    position:relative;
    overflow: hidden;
    -webkit-transition: height 0.5s ease-in-out;
    -moz-transition: height 0.5s ease-in-out;
    -o-transition: height 0.5s ease-in-out; 
    transition: height 0.5s ease-in-out;
}

/*.buttonHome:hover,.buttonHome:active,.buttonHome:focus,.buttonHome:target{
    height:170px;
}*/
.identificar,.registrar,.registrarPadding,.identificarPadding{
    /*cursor: pointer;*/
}

.registrar{
    background-color: #F046B9;
    margin-left: 1%;
    display:block;
    margin-bottom: 30px;
}

.registrarPadding{
    background-color: #F046B9;
    margin-left: 1%;
    display:block;
    padding-bottom: 5px;
    padding-top: 7px;
}

.identificarPadding{
    background-color: #00a7c8;
    margin-left: 1%;
    display:block;
    padding-bottom: 5px;
    padding-top: 7px;
}

.uneteLabel{
    font-size: 16px;
    display:block;
    margin:25px;  
}

.identificar{
    background-color: #00a7c8;
}

.hide{
    font-size: 22px;
    display:block;
    margin:25px;
}

.floatleft{
    float:left;
}

.floatright{
    float:right;
}

.white{
    color:white;
}

.loginEmail{
    display:block;
    border:solid 2px #00a7c8;
    width:85%;
    margin-right: 5%;
    float:right;
    margin-top: 15px;
}

.loginPassword{
    display:block;
    border:solid 2px #00a7c8;
    width:85%;
    margin-right: 5%;
    float:right;
    margin-top: 5px;
}

.forgot{
    color:white;
    display:inline-block;
    font-size: 14px;
    margin-top: 7px;
}

.loginButton{
    display:inline-block;
    background: #D73553;
    color:white;
    width:35%;
    float:right;
    height:25px;
    margin-right: 5%;
    border:none;
    margin-top: 10px;
}

.loginButton:hover,.loginButton:focus,.loginButton:active,.loginButton:target{
}


.colorBackground{
    /*background: url("fondocolor.jpg.xhtml?ln=images") no-repeat;
    background-size: cover;*/
    height:420px;
    padding-top: 15px;
    margin-bottom: 50px;
    margin-top: 30px;
    /*padding-left: 2.5%;
    padding-right: 2.5%;*/
}

@media screen and (max-width:800px){
    .divSlider li div span { font-size: 450% }
    .divCara{
       display:none;
    } 
    .divSlider{
        width:100%;
    }
    .homeText{
        display:block;
        width:100%;
        margin-bottom: 20px;
    }
    .buttonHome { width:100%; 
                  margin-bottom: 40px; 
                  height:60px; 
                  font-size: 200%
    }
    .buttonHome:hover,.buttonHome:active,.buttonHome:focus,.buttonHome:target{
    height:260px;
    }
    
    .homeTextBody{
        font-size:  150%;
    }
    
    .homeTextTitle{
        font-size: 250%;
    }
    
    .hide{
        font-size: 100%;
        display:block;
        margin:40px;
    }
    
    .loginEmail{
        display:block;
        border:solid 2px #00a7c8;
        width:85%;
        margin-right: 5%;
        float:right;
        height:30px;
        margin-top: 40px!important;
        font-size: 90%;
    }
    
    .loginPassword{
        display:block;
        border:solid 2px #00a7c8;
        width:85%;
        margin-right: 5%;
        float:right;
        margin-top: 5px;
        font-size: 90%;
        height:30px;
    }
    
    .loginButton{
        display:inline-block;
        background: #D73553;
        color:white;
        width:35%;
        float:right;
        height:45px!important;
        margin-right: 5%;
        border:none;
        margin-top: 10px;
    }
    
}


/*.allWidthHome{
    width:100%;
    margin-left: -2.5%;
    margin-right: -2.5%;
}*/


